<template>
    <div class="container">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="userNickname" label="用户昵称" width="150" />
            <el-table-column prop="points" label="加达币" />
            <el-table-column prop="type" label="增减类型" />
            <el-table-column prop="detailType" label="明细类型">
                <template #default="scope">
                    <span
                        :class="{ 'text-danger': scope.row.detailType === '分销返现', 'text-primary': scope.row.detailType === '消费抵扣' }">
                        {{ scope.row.detailType }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column prop="orderNo" label="订单号" />
            <el-table-column prop="time" label="时间" />
            <el-table-column prop="year" label="时间年" />
            <el-table-column prop="month" label="时间月" />
            <el-table-column prop="day" label="时间日" />
        </el-table>
    </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟表格数据
const tableData = ref([
    {
        userNickname: '用户1',
        points: 26,
        type: '增加',
        detailType: '分销返现',
        orderNo: '2025061219124421727',
        time: '2025-06-12 19:12:46',
        year: '2025',
        month: '2025-06',
        day: '2025-06-11'
    },
    {
        userNickname: '用户2',
        points: 20,
        type: '减少',
        detailType: '消费抵扣',
        orderNo: '2025061219124421727',
        time: '2025-06-12 19:12:46',
        year: '2025',
        month: '2025-06',
        day: '2025-06-11'
    },
    // 此处省略其他模拟数据，你可以按照上述格式补充完整
]);
</script>

<style scoped>
.container {
    padding: 20px;
}

.text-danger {
    color: red;
}

.text-primary {
    color: #83dcde;
}
</style>